<template>
  <div>
    <!-- 查询区域 -->
    <a-tag  v-for='(column,index) in dateList' @click='selectDate(column.date,column.week,index)' :color="index == activeIndex ? 'pink' : ''" style="height: 60px;margin-right: 5px;margin-right:15px;cursor:pointer;">
      {{column.title}}
    </a-tag>


    <a-row style='margin-top: 10px;'>
      <a-table
        ref='table'
        size='middle'
        bordered
        rowKey='id'
        :columns='columns'
        :dataSource='dataSource'
        :pagination='ipagination'
        :loading='loading'
        :rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
        @change='handleTableChange'>

        <template
          v-for="col in ['timeValueStr','allowQty','residueQty']"
          :slot='col'
          slot-scope='text, record, index'
        >
          <div :key='col'>
            <a-select v-if='col=="timeValueStr"' v-model="record.timeValueIds"   mode="multiple"  style='width: 250px' >
              <a-select-option value="">请选择</a-select-option>
              <a-select-option v-for="item in record.timeValueList" :key="item.key" :value="item.key">{{ item.label }}</a-select-option>
            </a-select>
            <a-input-number v-if='col=="allowQty"' v-model="record.allowQty" :min="1" :max="10"  />
            <a-input-number v-if='col=="residueQty"' v-model="record.residueQty" :min="1" :max="10" />
          </div>
        </template>
      </a-table>
    </a-row>
    <a-row>
      <a-form-model ref="form" :model="model" style="max-width: 500px; margin: 40px auto 0;">
        <a-form-item :wrapperCol="{span: 19, offset: 5}">
          <a-button @click="prevStep">上一步</a-button>
          <a-button style="margin-left: 8px" :loading="loading" type="primary" @click="nextStep">生成排班计划</a-button>
          <a-button style="margin-left: 8px" :loading="loading" type="primary" @click="nextStep2">一键排班计划</a-button>
        </a-form-item>
      </a-form-model>
    </a-row>
    <div class="table-operator">
      <div class="result">
        <div class="title">说明：</div>
        <div class="content">1）生成排班计划按钮是需要对每个日期生成排班表</div>
        <div class="content">2）一键排班计划 对往后日期生成一样的排班表</div>
      </div>
    </div>

  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

import CommonRuleParams from '@views/his/scheduling/RuleForm/CommonSchedulingRuleParams'
import { httpAction, getAction, postAction } from '@/api/manage'
import moment from 'moment'
import pick from 'lodash.pick'
export default {
  name: 'RuleStep2',
  mixins: [JeecgListMixin],
  components: {
    CommonRuleParams
  },
  data() {
    return {
      model: {},
      form:{},
      confirmLoading: false,
      loading:false,
      // 表头
      dateList: [],
      url: {
        add: '/his/scheduling',
        edit: '/his/scheduling',
        list: '/his/scheduling/scheduling/list',
        column: '/his/scheduling/column'
      },
      myMap: {},
      activeIndex:0,
      current:"",
      minWidth:200,
      editingKey: '',
      dataSource:[],
      // 表头
      columns: [
        {
          title: 'id',
          dataIndex: 'id',
          width: 60,
          align: 'center',
        },
        {
          title: '职称',
          align: 'center',
          dataIndex: 'employeeName',
          width: 130

        }, {
          title: '排班时间',
          align: 'center',
          dataIndex: 'timeValueStr',
          width: 180,
          scopedSlots: { customRender: 'timeValueStr' },
        },
        {
          title: '可预约人数',
          align: 'center',
          dataIndex: 'allowQty',
          width: 100,
          scopedSlots: { customRender: 'allowQty' },
        },
        {
          title: '剩余预约数',
          align: 'center',
          dataIndex: 'residueQty',
          width: 100,
          scopedSlots: { customRender: 'residueQty' },
        },
      ],
      //时间 早上，下午 晚上
      timeOptions:[],
      userOptions:[],
      currentChoseDate:"",
      disableMixinCreated:true,
      /* 分页参数 */
      dateIpagination: {
        current: 1,
        pageSize: 5,
        total: 0
      },
      psType:0,
    }
  },
  created() {

    console.log(' -- RuleStep2 created -- ')
    //加载排班医生信息
    this.add()
    this.initRequestData()
    this.$nextTick(() => {
      Object.assign(this.model, CommonRuleParams.commonRuleForm2Data.dataSource)
      //this.form.setFieldsValue(pick(this.model, 'storeInfoId'))
    })
    //this.myMap = new Map()
  },
  methods: {
    handleProChange(value, props) {
      console.log(props)
      console.log(value)
      let { rowId, target } = props
      let values = [
        {
          rowKey: rowId,
          values: {
            'timeValue': value,
          },
        },
      ]
      target.setValues(values)
    },
    selectDate(date,week,index){
      const that=this;
      that.activeIndex=index;
      that.currentChoseDate=this.dateList[index].date
      this.getData();
    },
    initRequestData() {
      let that = this
      var planId=CommonRuleParams.commonRuleForm1Data.dataSource.planId;
      getAction('/his/scheduling/plan/time/'+planId).then((res) => {
         res.result.forEach((item, index) => {
           that.timeOptions.push({"text":item.planName,"value":item.planId});
         })
      })
    },
    handleChangePage(page, pageSize) {
      this.loadDateData(page - 1)
    },
    getData(){
      const that=this;
      let departId = CommonRuleParams.commonRuleForm1Data.dataSource.departId
      let schedulingCode=CommonRuleParams.commonRuleForm1Data.dataSource.schedulingCode
      that.dataSource=[];
      postAction('/his/scheduling/scheduling/list',{"departmentId":departId,"schedulingCode":schedulingCode,"date":this.currentChoseDate}).then((res) => {
           that.dataSource=res.result;
      })
    },
    loadDateData(pageNo) {
      const that=this;
      that.dateList = []
      let schedulingCode=CommonRuleParams.commonRuleForm1Data.dataSource.schedulingCode
      getAction('/his/scheduling/column/' + schedulingCode + '/' + pageNo).then((res) => {
        if (res.success) {
          this.dateList = res.result.records || res.result
          if (res.result.total) {
            that.dateIpagination.total = res.result.total
            that.dateIpagination.current = res.result.pageNo
            that.currentChoseDate=that.dateList[0].date
            that.getData();
          } else {
            that.dateIpagination.total = 0
          }
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    add() {
      const that=this;
      that.loadDateData(0);
    },
    handleOk() {
      const that = this
      postAction(this.url.add, {
        startDate: CommonRuleParams.commonRuleForm1Data.dataSource.rangeDateTime,
        departId: CommonRuleParams.commonRuleForm1Data.dataSource.departId,
        planId: CommonRuleParams.commonRuleForm1Data.dataSource.planId,
        timeId: CommonRuleParams.commonRuleForm1Data.dataSource.timeId,
        date: this.currentChoseDate,
        dataSource: this.dataSource,
        psType:this.psType
      }).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.close()
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.confirmLoading = false
      })
    },
    nextStep() {
      this.handleOk()
    },
    nextStep2(){
      const that = this
      this.$confirm({
        title: "确认提交",
        content: "是否对往后日期生成一样的排班表?",
        onOk: function () {
          that.psType=1;
          that.handleOk();
        }
      });
    },
    prevStep() {
      this.$emit('prevStep')
    }

  }
}
</script>

<style lang="less" scoped>
.stepFormText {
  margin-bottom: 24px;

  .ant-form-item-label,
  .ant-form-item-control {
    line-height: 22px;
  }
}

</style>